<template>
  <div class="like">
    <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff">
      <div class="relative">
        <image class="pointer-events-none absolute left-0 right-0 top-0 w-full"
               :src="`${cdnUrl}/imgs/detail/bg.png${imgVersion}`" mode="aspectFill" />
        <div class="z-999 flex items-center px-20rpx" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
          <uni-icons type="back" size="28" />
          <text class="text-36rpx font-600">点赞</text>
        </div>
      </div>
    </div>
    <div class="mt-48rpx p-32rpx">
      <div v-for="item in likeData" class="item h-92rpx flex items-center">
        <div class="avatar">
          <image class="mr-24rpx h-92rpx w-92rpx" :src="item.avatar" mode="scaleToFill" />
        </div>
        <div class="describe flex-1">
          <div class="title text-28rpx font-600 leading-33rpx text-hex-333">{{ item.title }}</div>
          <div class="mt-15rpx text-24rpx leading-28rpx text-hex-999">
            <span>{{ item.trendInfo }}</span>
            <span class="ml-24rpx">{{ item.timer }}</span>
          </div>
        </div>
        <div class="h-92rpx w-92rpx rounded-32rpx bg-hex-d9d9d9">
          <image class="h-92rpx w-92rpx rounded-32rpx" :src="item.worksImg" mode="scaleToFill" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
let likeData: any = $ref([
  {
    title: '呱呱',
    trendInfo: '赞了你的动态',
    timer: '1分钟前',
    avatar: `${cdnUrl}/imgs/detail/avatar.png${imgVersion}`,
    worksImg: 'https://www.baidu.com/link?url=LjKe5k2yANXwOeVO00F7gVi2INUR8WM-LT4WGkDwy1YgOM9oaEJdivUOqiubPgmj0nuUQisi_chqyI7yKW_tbg2F0gGCBVmihhrkBy4x2xmksuuPCwP8eDBw_mJiizVSeZf3upm84CAiYU8uPbXAVwTQYVDN9GGIxvoZr4MH2phdBamP5C0Aa9W8n7oXAefpD8VFLQMjk-Z4T525u84YA792J3ZkBnWaTeDbFGGdmrFlPLR32qJtsqQC7Be3GPL20QRSaXJeHzgOfno0Ikfy-GtxwcMq-Ssa7S7Hk_wNdF00KHpQ2wQQTBQvz512aSxVwFk4NHigImOpXjKYvJFBhYfpCchKlcYa8YfXcw2R75txbNbXJdZ6aqdq074G7jOw-xe_rAR3r1AfJb9d3wWxFyNND7uB6ZfxuYnS1CVQ3cmxKRxclse5flSLwC-_cp6hbugxWbod8kaFb0w5DrKA3N3uSKwufKFkSVv014vQNhXYAqnf1KZ_G_kn1Yfkart30NL4snxHumqlp_QSUwSAVGjvZ9A2efbI-VpjS29EZud-dFqWnO5UpwSYtutddO2V0sxB0jeaydtVH5EvUsFiyv2WOzpAh5YB23cMwMvpEdYOatToMHuDORkF27PokhHD6BgDWFRAIfY9HNuyyZ5ttKZXE874s1shU_1ejtxtBDrC-i4gUC8yHiO5K4oU1dTqM-m4DPATXIL_-wP6f78RQUEPRa3B-d-PaTUek9zEW_G&wd=&eqid=b2bc4fcb00006fc80000000564b0ed9d',
  },
])
let searchBarTop: any = $ref('24')
let rightBar: any = $ref(0)
onLoad(() => {
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  rightBar = menuButtonInfo.width

  // #endif
})
</script>

<style lang='scss'>
.like{
  .item{
    position: relative;

    & :not(:last-child)::after {
      content: '';
      position: absolute;
      bottom: -32rpx;
      left: 0;
      width: 100%;
      height: 1px;
      background-color: #f5f5f5; /* 分割线颜色 */
    }
  }

}
</style>
